<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getUserClockStatusApi } from '@/apis/user'
import { showToast } from 'vant'

const router = useRouter()
const route = useRoute()

let prize = route.query.prize
let num = route.query.num

let gname = ref('')
let gimgurl = ref('')

switch (prize) {
  case '1':
    gname.value = '定制笔记本'
    gimgurl.value = new URL('../assets/img/g1.png', import.meta.url)
    break
  case '2':
    gname.value = '小熊猫玩具'
    gimgurl.value = new URL('../assets/img/g2.png', import.meta.url)
    break
  case '3':
    gname.value = '镭射包'
    gimgurl.value = new URL('../assets/img/g3.png', import.meta.url)
    break
}

// 地图信息列表
let mapList = ref([
  {
    id: '9622895784',
    mimgurl: new URL('../assets/img/m1_0.png', import.meta.url),
    isActive: false
  },
  {
    id: '5135684632',
    mimgurl: new URL('../assets/img/m2_0.png', import.meta.url),
    isActive: false
  },
  {
    id: '9333315769',
    mimgurl: new URL('../assets/img/m3_0.png', import.meta.url),
    isActive: false
  },
  {
    id: '9128376817',
    mimgurl: new URL('../assets/img/m4_0.png', import.meta.url),
    isActive: false
  }
])

let isAns = ref(false)

// 获取用户打卡状态
const getUserStatus = async () => {
  const res = await getUserClockStatusApi()
  if (res.data.code !== 200) {
    return showToast(res.data.msg)
  }
  let data = res.data.data
  data.s1 == 1 ? (mapList.value[0].isActive = true) : (mapList.value[0].isActive = false)
  data.s2 == 1 ? (mapList.value[1].isActive = true) : (mapList.value[1].isActive = false)
  data.s3 == 1 ? (mapList.value[2].isActive = true) : (mapList.value[2].isActive = false)
  data.s4 == 1 ? (mapList.value[3].isActive = true) : (mapList.value[3].isActive = false)
  data.q == 1 ? (isAns.value = true) : (isAns.value = false)
}

getUserStatus()

// 点击抽奖
let resultflag = ref(false)

num == '2' ? (resultflag.value = false) : (resultflag.value = true)

// 兑奖
const toExchange = () => {
  // 后台查询是否答过问卷，答过则跳转兑换页面，未答过则跳转问卷页面
  isAns.value ? router.replace('/exchange') : router.replace('/questions')
}
</script>
<template>
  <div class="lottery box bg clmcenter">
    <img src="@/assets/img/slogan.png" class="logo" />
    <div class="mapbox">
      <img
        :src="item.mimgurl"
        v-for="(item, index) in mapList"
        :key="item.id"
        :class="['mimg', `mimg${index + 1}`]"
        :style="{ opacity: item.isActive ? 1 : 0.41 }"
      />
      <img src="@/assets/img/m5_0.png" class="mimg mimg5" />
    </div>
    <div class="lottery_before_box" v-show="!resultflag">
      <div class="lotterybtnbox" @click="resultflag = true">
        <img src="@/assets/img/icon1.png" class="btnani" />
        <img src="@/assets/img/icon2.png" class="btnani" />
      </div>
      <p class="lotterytipsbox">
        您已成功打卡{{ num == '2' ? '两个' : '四个' }}站点<br />
        点击任意卡片抽取奖品
      </p>
    </div>
    <div class="lottery_after_box" v-show="resultflag">
      <img :src="gimgurl" class="gimg" />
      <p class="gongxi">恭喜您获得{{ gname }}</p>
      <div class="exchangebtnbox">
        <img
          src="@/assets/img/btn_exchange.png"
          class="btn btn_exchange btnani"
          @click="toExchange"
        />
        <img
          src="@/assets/img/btn_continum.png"
          class="btn btn_continum btnani"
          v-show="num == '2'"
          @click="$router.replace('/map')"
        />
      </div>
    </div>
    <div class="maskbox"></div>
  </div>
</template>

<style lang="scss" scoped>
.lottery {
  .maskbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
  }
  .logo {
    width: 230px;
  }
  .mapbox {
    margin-top: 47px;
    position: relative;
    width: 697px;
    height: 538px;
    background: url('@/assets/img/map2.png') no-repeat;
    background-size: 100% 100%;
    .mimg {
      position: absolute;
      width: 68px;
    }
    .mimg1 {
      top: 110px;
      left: 160px;
    }
    .mimg2 {
      top: 164px;
      left: 420px;
    }
    .mimg3 {
      left: 30px;
      bottom: 29px;
    }
    .mimg4 {
      top: 215px;
      left: 315px;
    }
    .mimg5 {
      right: 160px;
      bottom: 29px;
      opacity: 1;
    }
  }
  .lottery_before_box,
  .lottery_after_box {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 662px;
    margin-top: -168px;
    margin-bottom: 50px;
    text-align: center;
    .lotterytipsbox,
    .gongxi {
      font-size: 33.33px;
      color: #ffffff;
    }
  }
  //   提示抽奖页
  .lottery_before_box {
    .lotterybtnbox {
      margin-top: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 234px;
      }
      img:last-child {
        margin-left: 32px;
        animation-delay: 1s;
      }
    }
    .lotterytipsbox {
      padding-top: 45px;
    }
  }
  // 抽奖结果页
  .lottery_after_box {
    .gimg {
      width: 468px;
    }
    .gongxi {
      padding-top: 14px;
    }
    .exchangebtnbox {
      margin-top: 66px;
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }
}
</style>
